<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/views/common/include/taglib.jsp"%>

<section>
	<div style="height: 40px; line-height: 40px;">
		<div class="forword_area"></div>
		<div class="location">当前位置：${sessionScope.currcent_position}</div>
	</div>
	<hr>
	<section>
		<!--begin 搜索栏 -->
		<div class="panel">
			<div style="float: left; height: 28px;">
				<input id="title" type="text" maxlength="20"
					value="${(not empty title)? title : ''  }" class="input-sm"
					placeholder="标题">
			</div>
			<div class="btn-group">
				<select id="noticeType" name="noticeType" class="dropdown-menu">
					<option value="">&nbsp;&nbsp;&nbsp;通知类型</option>
					<c:forEach items="${noticeTypes }" var="notice">
						<option value="${notice.value }"
							<c:if test="${noticeType == notice.value }">selected</c:if>>&nbsp;&nbsp;&nbsp;${notice.label }</option>
					</c:forEach>
				</select>
			</div>
			<div class="btn-group">
				<select class="dropdown-menu" id="pSize">
					<c:forEach items="${pageSizes }" var="item">
						<option value="${item.value }"
							<c:if test="${pSize == item.value }">selected</c:if>>&nbsp;&nbsp;&nbsp;${item.label }</option>
					</c:forEach>
				</select>
			</div>
			<div class="form-control">
				<div>
					<div class="search" onclick="getNoticeInfoList();">
						<img src="${ctx }/images/table/search_second.png">
					</div>
					<div class="search" onclick="saveOrUpdateNotice();">
						<img src="${ctx }/images/table/add_second.png">
					</div>
					<div class="delete" style="float: left;" onclick="deleteByIds();">
						<img src="${ctx }/images/table/del_second.png">
					</div>
				</div>
			</div>
		</div>
		<!--end 搜索栏 -->

		<!--begin table表格 -->
		<div>
			<table class="table">
				<thead>
					<tr>
						<th width="3%"><img id="all" onclick="selectAll(this)"
							src="${ctx }/images/tables/wugou.png" style="margin-bottom: 1px;">
						</th>
						<th width="5%">序号</th>
						<th width="15%">标题</th>
						<th width="8%">小区名</th>
						<th width="10%">通知类型</th>
						<th width="10%">发布人</th>
						<th width="10%">阅读次数</th>
						<th width="10%">操作</th>
					</tr>
				</thead>
				<tbody id="tableTbody">
					<c:forEach items="${noticeInfo.list }" var="noticeInfo"
						varStatus="noticeInfoStatus">
						<tr onmouseover="mouseoverOne(this)"
							onmouseout="mouseoutOne(this)">
							<td><img id="noticeInfo${noticeInfo.id}"
								name="noticeInfoChecked" class="${noticeInfo.id}"
								onclick="selectOne('${noticeInfo.id}',this)"
								src="${ctx }/images/tables/wugou.png"></td>
							<td>${noticeInfoStatus.index + 1 }</td>
							<c:choose>
								<c:when test="${fn:length(noticeInfo.title) > 10}">
									<td id="title${noticeInfo.id}"
										onmouseover="mouseOverTitle(${noticeInfo.id} , '${noticeInfo.title}')"
										onmouseout="mouseOutTitle(${noticeInfo.id} , '${noticeInfo.title}')">${fn:substring(noticeInfo.title , 0 , 10)}...</td>
								</c:when>
								<c:otherwise>
									<td id="title${noticeInfo.id}">${noticeInfo.title}</td>
								</c:otherwise>
							</c:choose>
							<c:if test="${noticeInfo.cellName == null}">
								<td>全部小区</td>
							</c:if>
							<c:if test="${noticeInfo.cellName != null}">
								<td>${noticeInfo.cellName}</td>
							</c:if>
							<td><c:forEach items="${noticeTypes }" var="noticeType">
									<c:if test="${noticeType.value == noticeInfo.type}">
				                       			${noticeType.label}
				                       		</c:if>
								</c:forEach></td>
							<td>${noticeInfo.userAccount}</td>
							<td>${noticeInfo.readAccount}</td>
							<td>
								<a class="fa fa-check " onclick="saveOrUpdateNotice('${noticeInfo.id}');">编辑&nbsp;&nbsp;|&nbsp;</a>
								<a class="fa fa-check " onclick="detailNoticeInfo('${noticeInfo.id}');">详情&nbsp;&nbsp;|&nbsp;</a>
								<a class="fa fa-check " onclick="updateSort('${noticeInfo.id}');">置顶</a>
							</td>
						</tr>
					</c:forEach>
				</tbody>

				<tfoot>
					<tr>
						<td colspan="8">
							<div>
								<div style="float: left;">
									<span class="total">合计 ${noticeInfo.total} 条数据</span>
								</div>
								<div style="float: right; margin-right: 10px; margin-top: 29px">
									<div style="float: left;">
										<ul class="footer_ul">
											<c:if test="${noticeInfo.hasPreviousPage }">
												<li onclick="gotoPage(${currentPage-1 });"><a
													style="color: #37CED4">&lt;&lt;</a></li>
											</c:if>
											<c:if test="${noticeInfo.firstPage > 1}">
												<li onclick="gotoPage(1);"
													style="border: 1px solid #9A9A9A;"><a>1</a></li>
												<c:if test="${noticeInfo.firstPage > 2}">
				                        		...
				                        	</c:if>
											</c:if>
											<c:forEach items="${noticeInfo.navigatepageNums }" var="page">
												<li onclick="gotoPage(${page });"
													class="<c:if test="${currentPage == page }">active</c:if>"
													style="border: 1px solid #9A9A9A;"><a>${page}</a></li>
											</c:forEach>
											<c:if test="${noticeInfo.lastPage < noticeInfo.pages}">
												<c:if test="${noticeInfo.firstPage < noticeInfo.pages - 1}">
				                        		...
				                        	</c:if>
												<li onclick="gotoPage(${noticeInfo.pages});"
													style="border: 1px solid #9A9A9A;"><a>${noticeInfo.pages}</a>
												</li>
											</c:if>
											<c:if test="${noticeInfo.hasNextPage }">
												<li><a onclick="gotoPage(${currentPage+1});"
													style="color: #37CED4">&gt;&gt;</a></li>
											</c:if>
										</ul>
									</div>
									<div style="float: left; height: 30px;">
										<span style="color: #9A9A9A;">跳转到</span> <input
											class="inputclass" id="pageNo"
											onkeydown="if(event.keyCode==13){event.keyCode=0;return false;}"
											type="text" value="${currentPage }"
											style="width: 26px; height: 28px"onkeyup = "checInputNum(this)"> <span
											style="color: #9A9A9A;">页</span> <span class="buttonclass"
											id="J_JumpTo" onclick="gotoNoticeInfoPage(null);"><a>GO</a></span>
									</div>
								</div>
							</div>
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
		<%@include file="/views/common/footer.jsp"%>
	</section>
</section>
<script
	src="${ctx}/js/controllers/news/noticeinfo/NoticeInfoListController.js"
	type="text/javascript"></script>
<script type="text/javascript">
	var ctx = '${ctx}';
	setCtx(ctx);
</script>
<script type="text/javascript">
//实现选中取消切换图片
$("tbody td>img").toggle(function(){    
    $(this).attr("src","${ctx }/images/tables/honggou.png"); 
    //$(this).parents("tr").children().each(function(){
	   // $(this).css("background","#D3F0F1");
   //});    
},function(){    
    $(this).attr("src", "${ctx }/images/tables/wugou.png"); 
    //$(this).parents("tr").children().each(function(){
	    //$(this).css("background","");
   //});
    });
    
//实现全选切换所有选项图标
$("#all").toggle(function(){    
    $(this).attr("src","${ctx }/images/tables/honggou.png"); 
    $("tbody td>img").attr("src","${ctx }/images/tables/honggou.png");  
},function(){    
    $(this).attr("src", "${ctx }/images/tables/wugou.png"); 
    $("tbody td>img").attr("src","${ctx }/images/tables/wugou.png");  
    });
    
//实现字段较长时的隐藏于显示
var index;
function mouseOverTitle(item , title){
	index = layer.tips(title, '#title' + item, {
		  tips: [3, '#37CED4']
		});
}

function mouseOutTitle(item , title){
	layer.close(index);
}

</script>

<!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
<script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>
